import { nextTick, ref } from 'vue'
import type { RandomTestingStore } from '.'
import { RandomTestingPageType, TestTypeKey } from '../constants/RandomTesting'
import { computed } from 'vue'
import type ChangeClassificationFormVue from '../cmpt/ChangeClassificationForm/ChangeClassificationForm.vue'
import { ClassificationType } from '@/models/Classification/Classification'

export class PlainStore {
  constructor(rootStore: RandomTestingStore) {
    this.rootStore = rootStore
  }

  rootStore

  keepCurrentIndex = ref(false)

  /**
   * 当前页面类型
   */
  pageType = ref(RandomTestingPageType.InterviewQuestions)

  setPageType = (pageType: RandomTestingPageType) => {
    this.pageType.value = pageType
  }

  /**
   * 是否展示答案
   */
  showAnswer = ref(false)

  /**
   * 禁用上一题按钮
   */
  disabledPre = computed(() => {
    const { rootStore, pageType } = this
    const { renderQuestionStore } = rootStore
    const { currentIndex } = renderQuestionStore
    return currentIndex.value === 0 || pageType.value !== RandomTestingPageType.InterviewQuestions
  })

  /**
   * 禁用下一题按钮
   */
  disabledNext = computed(() => {
    const { pageType } = this
    return pageType.value !== RandomTestingPageType.InterviewQuestions
  })

  /**
   * 禁用展示答案按钮
   */
  disabledShowAnswer = computed(() => {
    const { disabledNext } = this
    return disabledNext.value
  })

  /**
   * 点击下一题按钮
   */
  onClickNext = async () => {
    const { rootStore, keepCurrentIndex } = this
    const { randomTestStore, renderQuestionStore } = rootStore
    const { currentIndex } = renderQuestionStore
    if (this.disabledNext.value) return
    randomTestStore.setQuestionCurrentIndex(
      keepCurrentIndex.value ? currentIndex.value : currentIndex.value + 1,
    )
    randomTestStore.initQuestion().then(() => {
      renderQuestionStore.syncRenderData()
    })
    this.showAnswer.value = false
    this.keepCurrentIndex.value = false
  }

  /**
   * 点击上一题按钮
   */
  onClickPre = async () => {
    const { rootStore } = this
    const { randomTestStore, renderQuestionStore } = rootStore
    const { currentIndex } = renderQuestionStore
    if (this.disabledPre.value) return
    randomTestStore.setQuestionCurrentIndex(currentIndex.value - 1)
    randomTestStore.initQuestion().then(() => {
      renderQuestionStore.syncRenderData()
    })
    this.showAnswer.value = false
    this.keepCurrentIndex.value = false
  }

  /**
   * 点击页面重置缓存按钮
   */
  onClickReset = () => {
    const { rootStore } = this
    const { randomTestStore, renderQuestionStore } = rootStore
    randomTestStore.reset()
    this.setPageType(RandomTestingPageType.InterviewQuestions)
    this.showAnswer.value = false
    this.onCloseSettingDrawer()
    randomTestStore.init()
    randomTestStore.initQuestion().then(() => {
      renderQuestionStore.syncRenderData()
    })
  }

  onClickResetDoneStatus = () => {
    const { rootStore } = this
    const { randomTestStore, classificationStore } = rootStore
    randomTestStore.resetDoneList()
    classificationStore.setTestType(TestTypeKey.NotDone)
    this.onClickReset()
  }

  onClickResetCurrentTestDoneTatus = () => {
    const { rootStore } = this
    const { randomTestStore, classificationStore } = rootStore
    randomTestStore.resetCurrentTestDoneList()
    classificationStore.setTestType(TestTypeKey.NotDone)
    this.onClickReset()
  }

  /**
   * 切换答案显示状态
   */
  onToggleShowAnswer = () => {
    if (this.disabledShowAnswer.value) return
    this.showAnswer.value = !this.showAnswer.value
  }

  loading = computed(() => {
    const { rootStore } = this
    const { randomTestStore, classificationStore } = rootStore
    const { loading: loadingClassificationData } = classificationStore
    const { loadingQuestion } = randomTestStore
    return loadingQuestion.value || loadingClassificationData.value
  })

  headerTitle = computed(() => {
    const { rootStore } = this
    const { classificationStore } = rootStore
    return classificationStore.name.value || '全题库'
  })

  titleStyle = computed(() => {
    const { rootStore } = this
    const { pageConfigStore } = rootStore
    const { titleFontSize, titleFontWeight } = pageConfigStore
    return {
      fontSize: `${titleFontSize.value}px`,
      fontWeight: titleFontWeight.value * 100,
    }
  })

  answerStyle = computed(() => {
    const { rootStore } = this
    const { pageConfigStore } = rootStore
    const { answerFontSize, answerFontWeight } = pageConfigStore
    return {
      fontSize: `${answerFontSize.value}px`,
      fontWeight: answerFontWeight.value * 100,
    }
  })

  changeClassificationFormRef = ref<null | InstanceType<typeof ChangeClassificationFormVue>>()

  /**
   * 修改题库分类的Modal
   */
  changeClassificationModal = ref(false)

  /**
   * 展示修改题库分类的Modal
   */
  onShowChangeClassificationModal = () => {
    const { rootStore } = this
    const { classificationStore } = rootStore
    this.changeClassificationModal.value = true
    nextTick(() => {
      if (!this.changeClassificationFormRef.value) return
      this.changeClassificationFormRef.value.setFormStata({
        classification: classificationStore.classification.value?.code,
        secondaryClassification: classificationStore.secondaryClassification.value?.code,
        testType: classificationStore.testType.value,
      })
    })
  }

  /**
   * 点击修改题库分类的Modal的确认按钮
   */
  onChangeClassificationOk = () => {
    const { rootStore } = this
    const { randomTestStore, classificationStore, renderQuestionStore } = rootStore
    if (!this.changeClassificationFormRef.value) return
    const data = this.changeClassificationFormRef.value.getFormState()
    const { classification: code1, secondaryClassification: code2, testType } = data
    if (code2) {
      classificationStore.setType(ClassificationType.secondaryClassification)
      classificationStore.setCode(code2)
    } else if (code1) {
      classificationStore.setType(ClassificationType.classification)
      classificationStore.setCode(code1)
    } else {
      classificationStore.setType('')
      classificationStore.setCode('')
    }
    classificationStore.setTestType(testType)
    randomTestStore.reset()
    this.setPageType(RandomTestingPageType.InterviewQuestions)
    this.showAnswer.value = false
    randomTestStore.init()
    randomTestStore.initQuestion().then(() => {
      renderQuestionStore.syncRenderData()
    })
    this.onChangeClassificationCancel()
  }

  /**
   * 点击修改题库分类的Modal的取消认按钮
   */
  onChangeClassificationCancel = () => {
    this.changeClassificationModal.value = false
    this.changeClassificationFormRef.value?.resetFormStata()
  }

  /**
   * 页面配置抽屉
   */
  settingDrawer = ref(false)

  /**
   * 展示页面配置抽屉
   */
  onShowSettingDrawer = () => {
    this.settingDrawer.value = true
  }

  /**
   * 关闭页面配置抽屉
   */
  onCloseSettingDrawer = () => {
    this.settingDrawer.value = false
  }

  /**
   * 重置页面配置
   */
  onResetPageConfig = () => {
    const { rootStore } = this
    const { pageConfigStore } = rootStore
    pageConfigStore.resetData()
  }

  onToggleQuestionDoneStatus = () => {
    const { rootStore } = this
    const { renderQuestionStore, randomTestStore, classificationStore } = rootStore
    const { question, hasDone } = renderQuestionStore
    const { testType } = classificationStore
    if (!question.value) return
    this.keepCurrentIndex.value =
      (hasDone.value && testType.value === TestTypeKey.Done) ||
      (!hasDone.value && testType.value === TestTypeKey.NotDone)
    randomTestStore.toggleDoneList(question.value)
  }
}
